<template>
  <div class='container'>
    <el-card class="card">
      <el-row class="header">
      <el-row type="flex" justify="space-between" style="margin-bottom:20px">
        <el-col :span='6'>
          <span>标签名称</span>
          <el-input v-model="page.tags" placeholder="请输入内容" size="small" style="width:65%"></el-input>
        </el-col>
        <el-col :span='6'>
          <span>城市</span>
          <el-select v-model="page.province"  @change="changCity" size="small" clearable placeholder="请选择" style="width:65%">
          <el-option
            v-for="(item,index) in options"
           :key="index"
           :label="item"
           :value="item"
           >
          </el-option>
         </el-select>
        </el-col>
        <el-col :span='6'>
          <span>地区</span>
          <el-select v-model="page.city" clearable size="small" placeholder="请选择" style="width:65%">
            <el-option
             v-for="(item,index) in cityList"
            :key="index"
            :label="item"
            :value="item">
            </el-option>
         </el-select>
        </el-col>
       <el-col :span='6' >
          <span>企业简称</span>
           <el-input v-model="page.shortName" placeholder="请输入内容" size="small" style="width:70%" ></el-input>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="6">
         <span>企业状态</span>
         <el-input v-model="page.state" placeholder="请输入内容" size="small" style="width:65%"></el-input>
        </el-col>
        <el-col :span='16'>
          <el-button size="small" @click="clearList">清除</el-button>
          <el-button size="small" type="primary" @click="companyList">搜索</el-button>
        </el-col>
        <el-col :span='2' style="padding-right:10%">
         <el-button type="success" size="small" icon="el-icon-edit" @click="addCnpy">新增按钮</el-button>
        </el-col>

      </el-row>
      </el-row>
      <div class="total"><i class="el-icon-info"></i>  共{{total}}条记录</div>

       <el-table
       class="table"
      :data="list"
      style="width: 100%"
      >
      <el-table-column

       align="center"
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
      align="center"
        prop="number"
        label="企业编号"
        >
      </el-table-column>
      <el-table-column
      align="center"
        prop="shortName"
        label="企业简称">
      </el-table-column>
       <el-table-column
       align="center"
        prop="tags"
        label="标签">
      </el-table-column>
       <el-table-column
       align="center"
        prop="creatorID"
        label="创建者">
      </el-table-column>
       <el-table-column
       align="center"

        label="创建日期">
           <template slot-scope="scope">
             <span>{{ scope.row.addDate|parseTimeByString}}</span>
          </template>
      </el-table-column>
       <el-table-column
       align="center"
        prop="remarks"
        label="备注">
      </el-table-column>
       <el-table-column
       align="center"
       :formatter="formatEmployment"
       prop="state"
        label="状态">
      </el-table-column>
       <el-table-column
       align="center"
        prop="address"
        label="操作"
        fixed="right"
        width="200">
        <template slot-scope="{ row }">
         <el-tooltip class="item" content="编辑" placement="top" >
            <el-button type="primary" size="small" plain icon="el-icon-edit" @click="updateCpny(row)" circle></el-button>
         </el-tooltip>
         <el-tooltip class="item" :content="row.state==1?'启用':'禁用'" placement="top">
            <el-button :type="row.state==1?'success':'danger'" size="small" plain :icon="row.state==1?'el-icon-check':'el-icon-close'" @click="disabled(row)" circle></el-button>
         </el-tooltip>
         <el-tooltip class="item" content="删除" placement="top" >
            <el-button type="danger" size="small" plain icon="el-icon-delete" @click="deleteCpny(row)" circle></el-button>
         </el-tooltip>
         </template>
      </el-table-column>
    </el-table>
    <div class="block">

    <el-pagination

      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pagesize"
      :current-page="page.page"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changeSize"
      @current-change="changeCurrent"
      :total="total">
    </el-pagination>
    <CompanyAdd :isdialog.sync="isdialog" :isAdd="isAdd" :companyById="companyById" @getCompanyList="companyList" v-if="isdialog" ></CompanyAdd>
  </div>
    </el-card>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { list, remove, disabled } from '@/api/hmmm/companys'
import { status } from '@/api/hmmm/constants'
import CompanyAdd from '../components/companys-add.vue'
export default {
  components: {
    CompanyAdd
  },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      },
      total: 0,
      list: [],
      options: [],
      cityList: [],
      isdialog: false,
      isAdd: false,
      companyById: []
    }
  },
  created () {
    // 加载获取列表数据
    this.companyList()
  },
  methods: {
    // 获取地区列表
    changCity (val) {
      this.cityList = citys(val)
    },
    provinces () {
      const data = provinces()
      this.options = data
    },
    async companyList () {
      const { data } = await list(this.page)
      this.provinces()
      this.total = data.counts
      this.list = data.items
    },
    clearList () {
      this.page = {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      }
      this.options = []
      this.cityList = []
      this.companyList()
    },
    changeSize (val) {
      this.page.pagesize = val
      this.companyList()
    },
    changeCurrent (val) {
      this.page.page = val
      this.companyList()
    },
    // 格式化 枚举
    formatEmployment (row, column, cellValue, index) {
      const obj = status.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    // 删除
    async deleteCpny (row) {
      try {
        await this.$confirm('是否永久删除该企业', '提示')
        await remove(row)
        // 重新加载数据
        this.companyList()
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.warning('取消删除')
      }
    },
    // 修改
    updateCpny (row) {
      this.isdialog = true
      this.isAdd = false
      this.companyById = row
    },
    // 添加
    addCnpy () {
      this.isdialog = true
      this.isAdd = true
    },
    // 状态设置
    async disabled (row) {
      try {
        await this.$confirm(`已${row.state === 1 ? '启用' : '禁用'},是否${row.state === 1 ? '禁用' : '启用'}`, '提示', { type: 'warning' })
        await disabled({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        row.state = row.state === 1 ? 0 : 1
        this.$message.success(`${row.state === 1 ? '启用成功' : '禁用成功'}`)
      } catch (error) {
        this.$message.info('已取消操作')
      }
    }

  }
}
</script>

<style lang="scss"  scoped>
.card{
 padding: 0 10px;
 margin: 20px 15px;
 .table{
   margin: 20px 0;
 }
 .header{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 20px;
 }
 span{
   margin-right: 10px;
 }
 .total{
   font-size: 13px;
   height: 34px;
   line-height: 34px;
  background-color: #f4f4f5;
  color: #909399;
 padding-left: 20px;
 }
}

</style>
